<html xmlns="http://www.w3.org/1999/xhtml"
        xmlns:v="urn:schemas-microsoft-com:vml">

<head>
    <meta http-equiv='content-type' content='text/html; charset=UTF-8'/>
    <meta http-equiv='cache-control' content='no-cache'/>
    <meta http-equiv='expires' content='0'/>
    <meta name='copyright' content='Copyright (C) XXX Consultants'/>
    <meta name='robots' content='none'/>


    <link rel="stylesheet" href="/gts/css/main.css"/>

    <link rel="shortcut icon" href="/gts/images/favicon.ico"
            type="image/x-icon"/>

    <title>Create GeozoneCircle</title>


    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAZKWRbzG53z_kSdLESSrIHBTwM0brOpm-All5BF6PoaKBxRWWERSvuuPZb62Q0JAotLNi5bDQg9tcaQ"
            type="text/javascript"></script>

    <script type="text/javascript">
    //<![CDATA[

    var map ;
    var icon;

    var p1;
    var p2;
    var polygon;

    var lineColor = "#0000af";
    var fillColor = "#335599";
    var lineWeight = 3;
    var lineOpacity = .8;
    var fillOpacity = .2;

    function createPgn(latlons){
    var gp = new GPolygon(latlons, lineColor, lineWeight, lineOpacity, fillColor, fillOpacity);
    return gp;
    }

    function load()
    {

    if (GBrowserIsCompatible()) {
    map = new GMap2(document.getElementById("map"));
    map.addControl(new GSmallMapControl());
    map.addControl(new GMapTypeControl());
    // map.addControl(new GLargeMapControl());
    map.addControl(new GScaleControl()) ;
    map.addControl(new GOverviewMapControl()) ;
    // map.addMapType(G_PHYSICAL_MAP);

    var start = new GLatLng(35.127771,-89.967041);
    map.setCenter(start, 10);

    icon = new GIcon();
    icon.image = "http://labs.google.com/ridefinder/images/mm_20_red.png";
    icon.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png";
    icon.iconSize = new GSize(12, 20);
    icon.shadowSize = new GSize(22, 20);
    icon.iconAnchor = new GPoint(6, 20);





    p1 = new GMarker(new GLatLng(35.127771,-89.967041), {icon:icon, draggable: true});
    map.addOverlay(p1);
    p1.enableDragging();
    GEvent.addListener(p1,'dragend',function() {drawRect()});

    p2 = new GMarker(new GLatLng(35.260679,-90.018539), {icon:icon, draggable: true});
    map.addOverlay(p2);
    p2.enableDragging();

    GEvent.addListener(p2,'dragend',function() {drawRect()});

    drawRect();
    }
    }



    function drawRect(){

    map.clearOverlays();
    map.addOverlay(p1);
    map.addOverlay(p2);

    var point11 = p1.getPoint();
    var point22 = p2.getPoint();
    var point112 = new GLatLng(point11.lat(), point22.lng());
    var point122 = new GLatLng(point22.lat(), point11.lng());

    var points = [];
    points.push(point11);
    points.push(point112);
    points.push(point22);
    points.push(point122);
    points.push(point11);
    var ploygon =  createPgn(points)
    map.addOverlay(ploygon);

    document.getElementById("latitude1").value=  point11.lat();
    document.getElementById("longitude1").value= point11.lng() ;
    document.getElementById("latitude2").value=  point22.lat()  ;
    document.getElementById("longitude2").value= point22.lng() ;
    }


    //]]>

    </script>

</head>

<body onload="load()" onunload="GUnload()" leftmargin='0'
        rightmargin='0' topmargin='0' bottommargin='0'>

<div id="spinner" class="spinner" style="display: none;"><img
        src="/gts/images/spinner.gif" alt="Spinner"/></div>
<div class="logo"><img src="/gts/images/grails_logo.jpg"
        alt="Grails"/></div>

<div class="nav">
    <span class="menuButton"><a class="home" href="${createLinkTo(dir: '')}">Home</a></span>
    <span class="menuButton"><g:link class="list" action="list">GeozoneRectangle List</g:link></span>
</div>
<h1>Create GeozoneRectangle</h1>
<g:if test="${flash.message}">
    <div class="message">${flash.message}</div>
</g:if>
<g:hasErrors bean="${geozoneRectangle}">
    <div class="errors">
        <g:renderErrors bean="${geozoneRectangle}" as="list"/>
    </div>
</g:hasErrors>
<g:form action="save" method="post" style="width:400px;float:left">
    <div class="dialog">
        <table>
            <tbody>

                <tr class="prop">
                    <td valign="top" class="name">
                        <label for="geozoneNotifyType">Geozone Notify Type:</label>
                    </td>
                    <td valign="top" class="value ${hasErrors(bean: geozoneRectangle, field: 'geozoneNotifyType', 'errors')}">
                        <g:select id="geozoneNotifyType" name="geozoneNotifyType" from="${geozoneRectangle.constraints.geozoneNotifyType.inList.collect{it.encodeAsHTML()}}" value="${fieldValue(bean:geozoneRectangle,field:'geozoneNotifyType')}"></g:select>
                    </td>
                </tr>

                <tr class="prop">
                    <td valign="top" class="name">
                        <label for="description">Description:</label>
                    </td>
                    <td valign="top" class="value ${hasErrors(bean: geozoneRectangle, field: 'description', 'errors')}">
                        <input type="text" id="description" name="description" value="${fieldValue(bean: geozoneRectangle, field: 'description')}"/>
                    </td>
                </tr>

                <tr class="prop">
                    <td valign="top" class="name">
                        <label for="zoneType">Zone Type:</label>
                    </td>
                    <td valign="top" class="value ${hasErrors(bean: geozoneRectangle, field: 'zoneType', 'errors')}">
                        <g:select id="zoneType" name="zoneType" from="${geozoneRectangle.constraints.zoneType.inList.collect{it.encodeAsHTML()}}" value="${fieldValue(bean:geozoneRectangle,field:'zoneType')}"></g:select>
                    </td>
                </tr>

                <tr class="prop">
                    <td valign="top" class="name">
                        <label for="city">City:</label>
                    </td>
                    <td valign="top" class="value ${hasErrors(bean: geozoneRectangle, field: 'city', 'errors')}">
                        <input type="text" id="city" name="city" value="${fieldValue(bean: geozoneRectangle, field: 'city')}"/>
                    </td>
                </tr>

                <tr class="prop">
                    <td valign="top" class="name">
                        <label for="country">Country:</label>
                    </td>
                    <td valign="top" class="value ${hasErrors(bean: geozoneRectangle, field: 'country', 'errors')}">
                        <input type="text" id="country" name="country" value="${fieldValue(bean: geozoneRectangle, field: 'country')}"/>
                    </td>
                </tr>

                <tr class="prop">
                    <td valign="top" class="name">
                        <label for="dateCreated">Date Created:</label>
                    </td>
                    <td valign="top" class="value ${hasErrors(bean: geozoneRectangle, field: 'dateCreated', 'errors')}">
                        <g:datePicker name="dateCreated" value="${geozoneRectangle?.dateCreated}"></g:datePicker>
                    </td>
                </tr>

                <tr class="prop">
                    <td valign="top" class="name">
                        <label for="devicegroup">Devicegroup:</label>
                    </td>
                    <td valign="top" class="value ${hasErrors(bean: geozoneRectangle, field: 'devicegroup', 'errors')}">
                        <g:select optionKey="id" from="${Devicegroup.list()}" name="devicegroup.id" value="${geozoneRectangle?.devicegroup?.id}"></g:select>
                    </td>
                </tr>

                <tr class="prop">
                    <td valign="top" class="name">
                        <label for="lastUpdated">Last Updated:</label>
                    </td>
                    <td valign="top" class="value ${hasErrors(bean: geozoneRectangle, field: 'lastUpdated', 'errors')}">
                        <g:datePicker name="lastUpdated" value="${geozoneRectangle?.lastUpdated}"></g:datePicker>
                    </td>
                </tr>

                <tr class="prop">
                    <td valign="top" class="name">
                        <label for="postalCode">Postal Code:</label>
                    </td>
                    <td valign="top" class="value ${hasErrors(bean: geozoneRectangle, field: 'postalCode', 'errors')}">
                        <input type="text" id="postalCode" name="postalCode" value="${fieldValue(bean: geozoneRectangle, field: 'postalCode')}"/>
                    </td>
                </tr>

                <tr class="prop">
                    <td valign="top" class="name">
                        <label for="stateProvince">State Province:</label>
                    </td>
                    <td valign="top" class="value ${hasErrors(bean: geozoneRectangle, field: 'stateProvince', 'errors')}">
                        <input type="text" id="stateProvince" name="stateProvince" value="${fieldValue(bean: geozoneRectangle, field: 'stateProvince')}"/>
                    </td>
                </tr>

                <tr class="prop">
                    <td valign="top" class="name">
                        <label for="streetAddress">Street Address:</label>
                    </td>
                    <td valign="top" class="value ${hasErrors(bean: geozoneRectangle, field: 'streetAddress', 'errors')}">
                        <input type="text" id="streetAddress" name="streetAddress" value="${fieldValue(bean: geozoneRectangle, field: 'streetAddress')}"/>
                    </td>
                </tr>

                <tr class="prop">
                    <td valign="top" class="name">
                        <label for="latitude1">latitude1:</label>
                    </td>
                    <td valign="top" class="value ${hasErrors(bean: geozoneRectangle, field: 'points', 'errors')}">
                        <input type="text" id="latitude1" name="latitude1"/>
                    </td>
                </tr>

                <tr class="prop">
                    <td valign="top" class="name">
                        <label for="longitude1">longitude1:</label>
                    </td>
                    <td valign="top" class="value ${hasErrors(bean: geozoneRectangle, field: 'streetAddress', 'errors')}">
                        <input type="text" id="longitude1" name="longitude1"/>
                    </td>
                </tr>

                <tr class="prop">
                    <td valign="top" class="name">
                        <label for="latitude2">latitude2:</label>
                    </td>
                    <td valign="top" class="value ${hasErrors(bean: geozoneRectangle, field: 'streetAddress', 'errors')}">
                        <input type="text" id="latitude2" name="latitude2"/>
                    </td>
                </tr>

                <tr class="prop">
                    <td valign="top" class="name">
                        <label for="longitude2">longitude2:</label>
                    </td>
                    <td valign="top" class="value ${hasErrors(bean: geozoneRectangle, field: 'streetAddress', 'errors')}">
                        <input type="text" id="longitude2" name="longitude2"/>
                    </td>
                </tr>

            </tbody>
        </table>
    </div>
    <div class="buttons">
        <span class="button"><input class="save" type="submit" value="Create"/></span>
    </div>
</g:form>

<div id="map" style="width: 400px; height: 300px;  float: left;"></div>

</body>
</html>
